<!DOCTYPE html>
<html lang="cn" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户注册表单</title>
    <link rel="icon" href="pic/favicon.ico" type="image/x-icon">
    <script src="axios.min.js"></script>
    <script src="vue.global.js"></script>
    <style>
        /* 全局样式 */
        html, body {
            height: 100%; /* 确保页面高度为100% */
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-image: url("./pic/绿色.png"); /* 替换为你的背景图片路径 */
            background-size: cover; /* 背景图覆盖整个页面 */
            background-position: center; /* 背景图居中 */
            background-repeat: no-repeat; /* 防止背景图重复 */
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative; /* 用于定位内容 */
        }

        /* 背景图层 */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1; /* 背景图在第二层 */
        }

        /* 表单盒子 */
        #app {
            background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
            padding: 15px; /* 内边距缩小一半 */
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            width: 300px; /* 盒子宽度 */
            z-index: 2; /* 盒子在第一层 */
            position: relative; /* 确保层级生效 */
        }

        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 10px; /* 间距缩小一半 */
            font-size: 1.5em; /* 字体大小缩小一半 */
            position: relative; /* 确保标题在上层显示 */
            z-index: 3; /* 标题在盒子之上 */
        }

        label {
            display: block;
            margin-bottom: 4px; /* 间距缩小一半 */
            font-weight: bold;
            color: #555;
            font-size: 0.8em; /* 字体大小缩小一半 */
        }

        input[type="username"],
        input[type="password"] {
            width: 100%;
            padding: 5px; /* 内边距缩小一半 */
            margin-bottom: 10px; /* 间距缩小一半 */
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 0.8em; /* 字体大小缩小一半 */
            box-sizing: border-box;
        }

        input[type="username"]:focus,
        input[type="password"]:focus {
            border-color: #007BFF;
            outline: none;
        }

        button {
            width: 100%;
            padding: 6px; /* 内边距缩小一半 */
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 0.8em; /* 字体大小缩小一半 */
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        .error-message {
            color: red;
            font-size: 0.7em; /* 字体大小缩小一半 */
            margin-top: -5px; /* 间距缩小一半 */
            margin-bottom: 5px; /* 间距缩小一半 */
        }

        /* 注册按钮与确认密码输入框的间距 */
        .button-container {
            margin-top: 20px; /* 设置间距 */
        }
    </style>
</head>
<body>
<div id="app">
    <h2>用户注册</h2>
    <div>
        <label for="username">用户名：</label>
        <input type="username" id="username" value="" name="account" required>
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
    </div>
    <div>
        <label for="password2">重复：</label>
        <input type="password" id="password2" name="password2" required>
    </div>
    <div>
        <button v-on:click="registration()">注册</button>
    </div>
</div>
<script>
    <!--定义app对象-->
    const app = {
        //属性
        data() {
            return {}
        },
        //功能和行为
        methods: {
            //用户注册
            registration: function () {
                console.log("开始用户注册！")
                //异步注册
                axios({
                    method: 'post',
                    url: '/registration',
                    data: {
                        username: document.getElementById("username").value,
                        password: document.getElementById("password").value,
                        password2: document.getElementById("password2").value,
                    }
                }).then((response) => {
                    if (response.data === 'ok') {
                        alert("注册成功！")
                        //注册成功后跳转到登录界面
                        window.location.href = "login.html"
                    } else {
                        alert("注册失败，理由：" + response.data)
                    }
                })
            }

        },
        //启动和构造
        mounted() {
            console.log("vue启动成功！")
        }
    }

    //启动Vue
    Vue.createApp(app).mount("#app")

</script>
</body>
</html>